<template>
    <div class="app-container">
        <el-table
          :data="tableData"
          @updateData="initTableData"
          border
          style="width: max-content"
          
          stripe
        >
            <el-table-column
              prop="id"
              label="编号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="150">
            </el-table-column>
            
            <el-table-column
              prop="username"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="role.name"
              label="角色"
              width="120">
            </el-table-column>
            
            <el-table-column
              fixed="right"
              label="操作"
              width="120" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small" @click="callChild(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <edit-user-dialog ref="child" @updated="dialogUpdated"></edit-user-dialog>
    </div>
</template>

<script>
import { getList } from "@/api/table";
import { Message } from "element-ui";
import EditUserDialog from "@c/editUserDialog";
import { getData, Utils } from "@/utils/Util";

export default {
    components: { EditUserDialog },
    filters: {
        statusFilter(status) {
            const statusMap = {
                statusA: "success",
                statusB: "gray",
                statusC: "danger"
            };
            return statusMap[status];
        }
    },
    data() {
        return {
            listLoading: true,
            dialogFormVisible: false,
            tableData: [],
            // 缓存传向模态框的对象
            cacheObj: {}
        };
    },
    created() {
        this.fetchData();
        this.initComponent();
    },
    methods: {
        initComponent() {
            getData("/user/fields/ROLE/name").then(res => {
                console.log("收到字段::", res);
                this.$refs.child.roles = res;
            });
        },
        fetchData() {
            this.listLoading = true;
            getList().then((response) => {
                console.log("所有用户::", response);
                this.tableData = response;
                this.listLoading = false;
            });
        },
        handleClick(row) {
            console.log("选择的行::", row);
            Message.error("暂时无法执行!");
            // 删除处理逻辑
            
        },
        callChild(obj) {
            // 向模态框子组件传值
            this.$refs.child.setVisible(true);
            console.log("传给模态框::", obj);
            this.$refs.child.form = Utils.copyObject(obj);
            // for (const objKey in form) {
            //     form[objKey] = obj[objKey];
            // }
            this.cacheObj = obj;
        },
        initTableData(listData) {
            // console.log("初始化数据::", listData);
            this.tableData = listData;
        },
        dialogUpdated(res) {
            for (const resKey in res) {
                this.cacheObj[resKey] = res[resKey];
            }
        }
        
    }
};
</script>
<style lang="scss">
</style>